<template>
	<view id="bigBox">
		<!-- 顶部导航栏 -->
		<u-navbar
			title="宸坤美食"
			:is-back="false"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<!-- 主体内容 -->
		<view class="content_box">
			<!-- 轮播图 -->
			<view class="banner_box">
				<u-swiper :list="list" :height="360"></u-swiper>
			</view>
			<!-- 标题区 -->
			<view class="tabs_box">
				<text style="font-size: 36rpx">本周菜品</text>
				<text @click="anchorJump('#nextWeek', '.content_box', 10)">下周菜品</text>
				<text @click="provideDishName">我要报菜名</text>
				<view class="line"></view>
			</view>
			<!-- 餐品列表 -->
			<view class="food_box">
				<view class="food_item" v-for="(item, index) in thisWeek" >
					<view class="image_box" :style="{ backgroundImage: `url(${item.fileUrl})` }" @click="detailsBtn(item)"></view>
					<view class="item_content_box">
						<view class="title" @click="detailsBtn(item)">
							<u-tag
								:text="getWeek(item.groundingTime)"
								mode="dark"
								shape="circle"
								size="mini"
								type="warning"
							/>
							<text style="margin-left: 10rpx">{{ item.comboName }}</text>
						</view>
						<view class="describe">配菜：{{ item.comboDesc }}</view>
						<view class="btn" @click="placeBtn(item)">
							<text>¥{{ item.comboPrice }}</text>
							<u-tag text="预约" mode="dark" shape="circle" type="error" size="mini" />
						</view>
					</view>
					<view class="mask_box" v-if="item.exceedOrderTime">已过预定时间</view>
				</view>
			</view>
			<!-- 标题区 -->
			<view class="tabs_box" id="nextWeek">
				<text style="font-size: 36rpx">下周菜品</text>
				<text @click="provideDishName">我要报菜名</text>
				<view class="line"></view>
			</view>
			<!-- 餐品列表 -->
			<view class="food_box">
				<view class="food_item" v-for="(item, index) in nextWeek" :key="index">
					<view class="image_box" :style="{ backgroundImage: `url(${item.fileUrl})` }" @click="detailsBtn(item)"></view>
					<view class="item_content_box">
						<view class="title" @click="detailsBtn(item)">
							<u-tag
								:text="getWeek(item.groundingTime)"
								mode="dark"
								shape="circle"
								size="mini"
								type="warning"
							/>
							<text style="margin-left: 10rpx">{{ item.comboName }}</text>
						</view>
						<view class="describe">{{ item.comboDesc }}</view>
						<view class="btn" @click="placeBtn(item)">
							<text>¥{{ item.comboPrice }}</text>
							<u-tag text="预约" mode="dark" shape="circle" type="error" size="mini" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我要报菜名 -->
		<ProvideDish ref="provideDish" />
		<!-- 悬浮框 -->
		<FixedElement ref="fixedElement" />
		<!-- 预定套餐 -->
		<ReservationPackage ref="reservationPackage" />
		<!-- 底部导航栏 -->
		<Tabbar />
	</view>
</template>

<script>
import { anchorJump } from '@/common/utils'
import ProvideDish from '@/components/ProvideDish'
import FixedElement from './components/FixedElement'
import ReservationPackage from './components/ReservationPackage'
import { indexComboList } from '@/api/index'

export default {
	components: {
		ProvideDish,
		FixedElement,
		ReservationPackage
	},
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			title: 'Hello',
			thisWeek: [],
			nextWeek: [],
			list: []
		}
	},
	onLoad() {},
	onShow() {
		this.indexComboListThisWeek()
		this.indexComboListNextWeek()
	},
	methods: {
		anchorJump,
		// 我要报菜名
		provideDishName() {
			this.$refs.provideDish.showModal()
		},
		// 预定
		placeBtn(row) {
			// if (row.exceedOrderTime) {
			// 	return
			// }
			this.$refs.reservationPackage.showPopup(row)
		},
		// 进入详情页
		detailsBtn(row){
			uni.navigateTo({
				url: '/pages/details/index?data=' + encodeURIComponent(JSON.stringify(row))
			})
		},
		// 获取本周套餐列表
		async indexComboListThisWeek() {
			const { data } = await indexComboList(1)
			console.log(data, "获取本周套餐信息")
			
			//从本周套餐中获取最后两条数据图片
			const urlList = []
			for(let i = 0; 1 >= i; i++){
				let image = {image: data[i].fileUrl};
				urlList.push(image)
			}
			this.list = urlList;
			this.thisWeek = data
		},
		// 获取下周套餐列表
		async indexComboListNextWeek() {
			const { data } = await indexComboList(2)
			this.nextWeek = data
		},
		getWeek(date) {
			// 时间戳
			const week = this.moment(date).day()

			switch (week) {
				case 1:
					return '周一'
				case 2:
					return '周二'
				case 3:
					return '周三'
				case 4:
					return '周四'
				case 5:
					return '周五'
				case 6:
					return '周六'
				case 0:
					return '周日'
			}
		}
	}
}
</script>

<style scoped lang="scss">
.tabs_box {
	font-size: 28rpx;
	color: #101010;
	margin-top: 40rpx;
	padding: 0 20rpx;
	position: relative;
	font-weight: 400;

	text {
		margin-right: 50rpx;
	}

	.line {
		position: absolute;
		top: 28rpx;
		left: 25rpx;
		width: 135rpx;
		height: 15rpx;
		background-color: #f92c19;
		opacity: 0.6;
		border-radius: 20rpx;
	}
}

.food_box {
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.food_item {
		width: 340rpx;
		// height: 500rpx;
		// border: 1px solid #999;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
		position: relative;

		.image_box {
			border-radius: 30rpx;
			background-image: url('https://ckscm.oss-cn-shenzhen.aliyuncs.com/rop_applet_material/image/11111.png');
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 300rpx;
			background-position: center;
		}

		.mask_box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		.item_content_box {
			padding: 10rpx;

			.title {
				font-size: 26rpx;
				font-weight: bold;
			}

			.describe {
				font-size: 24rpx;
				color: #999;
				margin-top: 12rpx;
			}

			.btn {
				display: flex;
				margin-top: 6rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #101010;
			}
		}
	}
}
</style>
